<template>
	<view class="share-popup">
		<!-- 分享弹窗选项 -->
		<u-popup v-model="show" mode="bottom" border-radius="30">
			<view class="popup-box">
				<view class="popup-title">分享获得更精彩</view>

				<!-- 分享的目标 -->
				<view class="share-target flex flex-ai-c flex-jc-sb">
					<template>
						<view v-for="(item, i) in shareList" :key="i" class="flex flex-dir-c flex-ai-c"
							@click="handleShare(item)">
							<i-icon :icon="item.icon" size="90rpx" :color="item.color"
								:type="!item.color ? 'multiple':'single'"></i-icon>
							<text class="text">{{ item.text }}</text>
						</view>
					</template>
				</view>

				<!-- 取消按钮 -->
				<view class="btn-cancel" @click="cancel()">
					<text>取消</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		model: {
			prop: 'popupShow',
			event: 'up'
		},
		props: {
			popupShow: {
				type: Boolean,
				default: false
			},
			isDownload: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			show: {
				get() {
					return this.popupShow
				},
				set(v) {
					this.$emit('up', v)
				}
			}
		},
		data() {
			return {
				// 分享目标app列表
				shareList: [
					//#ifdef APP-PLUS
					{
						icon: 'iconweixin',
						text: '微信',
						color: '#46bb36',
						type: 'WXSceneSession'
					},
					{
						icon: 'iconpengyouquan',
						text: '朋友圈',
						color: '',
						type: 'WXSenceTimeline'
					},
					{
						icon: 'iconqq',
						text: 'QQ',
						color: '#18b6ed',
						type: 'qq',
						sizes: '80rpx'
					},
					//#endif
					{
						icon: 'iconLOGO',
						text: '好友',
						color: '#FBD220',
						type: 'friends'
					},
				],
			};
		},

		methods: {
			// 点击分享
			handleShare(item) {
				this.$emit('change', item.type)
			},

			// 取消
			cancel() {
				this.$emit('close', false)
				this.$emit('up', false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 分享弹窗样式
	.popup-box {
		font-size: 32rpx;
		color: #333333;

		.popup-title {
			padding-top: 40rpx;
			text-align: center;
		}

		.share-target {
			padding: 52rpx 64rpx 36rpx;

			.text {
				margin-top: 28rpx;
			}
		}

		// 取消按钮
		.btn-cancel {
			height: 100rpx;
			line-height: 100rpx;
			border-top: 10rpx solid #F4F4F4;
			text-align: center;
		}

	}
</style>